<template>
	<up-popup
		:show="show"
		closeable
		:zIndex="900"
		:closeOnClickOverlay="false"
		mode="center"
		bgColor="transparent"
		@close="close">
		<view class="pay">
			<view class="pay-title">选择支付方式</view>
			<view class="pay-list main-flex">
				<view class="pay-item main-flex-item" @click="changePayment(item)" v-for="item in paymentList" :key="item.id">
					<view class="pay-item-icon main-flex">
						<image class="pay-item-icon-img" :src="item.img" mode="aspectFit"></image>
					</view>
					<view class="pay-item-name">{{item.name}}</view>
				</view>
			</view>
		</view>
	</up-popup>
</template>

<script>

	export default {
		name: 'TyPay',
    emits: ['close', 'change'],
		props: {
			show: {
				type: Boolean,
				default: false
			},
			paymentList: {
				type: Array,
				default: []
			}
		},
    computed:{
      
    },
		watch: {
		},
		created() {
			
		},
    methods: {
			close() {
				this.$emit('close')
			},
			changePayment(item) {
				this.$emit('change', item)
			}
		}
	}
</script>
<style lang="scss" >
	.pay {
		width: 480px;
		border-radius: 10px;
		background-color: #ffffff;
		&-title {
			line-height: 48px;
			text-align: center;
			font-weight: 600;
			font-size: 20px;
		}
		&-list {
			padding: 40px;
		}
		&-item {
			cursor: pointer;
			&-icon {
				width: 100%;
				height: 100px;
				justify-content: center;
				&-img {
					width: 100px;
					height: 100px;
				}
			}
			&-name {
				font-size: 16px;
				text-align: center;
				margin-top: 10px;
			}
		}
	}
</style>
